<template>
  <div class="search_container searchArea">
    <el-form
      :inline="true"
      :model="search_data"
      :rules="rules"
      ref="search_data"
      class="demo-form-inline search-form"
    >
      <div>
        <el-form-item label="手机号">
          <el-input
            v-model="search_data.phone"
            placeholder="请输入"
            class="short-input"
          ></el-input>
        </el-form-item>

        <!-- <el-form-item label="上牌时间筛选">
          <el-select
            clearable
            v-model="search_data.child"
            placeholder="请选择"
            class="short-input"
          >
            <el-option
              v-for="item in list1"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item label="车龄筛选">
          <el-select
            clearable
            v-model="search_data.child"
            placeholder="请选择"
            class="short-input"
          >
            <el-option
              v-for="item in list5"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button
            type="primary"
            size="mini"
            icon="search"
            @click="onScreeoutMoney('search_data')"
            >筛选</el-button
          >
        </el-form-item>
        <!-- <el-form-item class="btnRight">
          <el-button type="primary" size="mini" icon="view" @click="onAddMoney()"
            >添加</el-button
          >
        </el-form-item> -->
      </div>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getCategoryList, categorydel } from "@/api/user";

export default {
  name: "searchItem",
  data() {
    return {
      subBusinessList: [],
      list1: [],
      list2: [],
      list3: [],
      list4: [],
      list5: [],
      search_data: {
        child: "",
        child2: "",
        child3: "",
        child4: "",
        startTime: "",
        endTime: "",
        name: "",
      },
      rules: {
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
      },
    };
  },
  computed: {
    ...mapGetters(["searchBtnDisabled"]),
  },
  created() {
    this.getCategoryList();
  },
  methods: {
    async getCategoryList() {
      let para = {
        opcode: "1",
        pagesize: 10,
        page: 1,
      };
      let res = await getCategoryList(para);
      var category = {
        1001: "车型",
        1002: "品牌",
        1003: "价格",
        1004: "公里数",
        1005: "车龄",
      };
      let dataList = new Array();
      let child = new Array();
      let dataDict = {};
      let data = res.data.data;
      for (let k in data) {
        dataDict["id"] = Number(k);
        dataDict["name"] = category[k];
        for (let j in data[k]) {
          data[k][j] = JSON.parse(data[k][j]);
          data[k][j]["id"] = Number(j);
          child.push(data[k][j]);
        }
        dataDict["child"] = child;
        dataList.push(dataDict);
        dataDict = {};
        child = [];
      }
      this.loading = false;
      this.tabList = dataList;
      this.list1 = dataList[0].child.map((item) => {
        return {
          name: item.nickname,
          value: item.id,
        };
      });
      this.list2 = dataList[1].child.map((item) => {
        return {
          name: item.nickname,
          value: item.id,
        };
      });
      this.list3 = dataList[2].child.map((item) => {
        return {
          name: item.nickname,
          value: item.id,
        };
      });
      this.list4 = dataList[3].child.map((item) => {
        return {
          name: item.nickname,
          value: item.id,
        };
      });
      this.list5 = dataList[4].child.map((item) => {
        return {
          name: item.nickname,
          value: item.id,
        };
      });
    },
    onScreeoutMoney(searchForm) {
      this.$refs[searchForm].validate((valid) => {
        if (valid) {
          this.$store.commit("SET_SEARCH", this.search_data);
          this.$emit("searchList");
        }
      });
    },
    onAddMoney() {
      this.$emit("showDialog", "add");
    },
    onBatchDelMoney() {
      this.$emit("onBatchDelMoney");
    },
  },
};
</script>

<style lang="less" scoped>
.search_container {
  margin-bottom: 20px;
}
.btnRight {
  float: right;
  margin-right: 0px !important;
}
.searchArea {
  background: rgba(255, 255, 255, 1);
  border-radius: 2px;
  padding: 18px 18px 0;
}
</style>
